<!-- 数据流通确权 数据审核 -->
<template>
  <div id='auditing'>
    <div id='entirety' style="background-image: url('/static/background/background.png');min-height: 89vh;">
      <div class='table_box' style="margin-right: 20px;">
        <div style="color: #FFFFFF; font-size: 18px; margin-left: 10px; margin-top: 10px;">数据流通确权-数据审核</div>
        <el-table
          :header-cell-style="{ background: 'transparent', color: '#606266' }"
          :data="tableData" height='80vh' border
          v-loading="loading"
          element-loading-background="rgba(0, 0, 0, 0.8)"
          style="width: 99%; margin-left: 10px; margin-top: 6px; margin-right: 10px;">
          <el-table-column prop="name" label="数据资源名称"/>
          <el-table-column prop="proprietorshipStatus" label="所有权审核状态">
            <template slot-scope="scope">
              <el-tag effect="plain" type="info" v-if="scope.row.proprietorshipStatus == 'PENDING'">
                待确认
              </el-tag>
              <el-tag effect="plain" type="" v-if="scope.row.proprietorshipStatus == 'CONFIRMING'">
                确权中
              </el-tag>
              <el-tag effect="plain" type="success" v-if="scope.row.proprietorshipStatus == 'APPROVED'">
                已通过
              </el-tag>
              <el-tag effect="plain" type="danger" v-if="scope.row.proprietorshipStatus == 'REJECTED'">
                驳回
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="dataType" label="数据类型"/>
          <el-table-column prop="dataCategory" label="数据分类"/>
          <el-table-column prop="dataFormat" label="数据拓展名"/>
          <el-table-column prop="proofType" label="证明文件类型"/>
          <el-table-column prop="price" label="价格" width="100"/>
          <el-table-column prop="createdAt" label="创建时间">
            <template slot-scope="scope">
              {{ timestampToDatetime(scope.row.createdAt) }}
            </template>
          </el-table-column>
          <el-table-column prop="updatedAt" label="更新时间">
            <template slot-scope="scope">
              {{ timestampToDatetime(scope.row.updatedAt) }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="mini" v-if="scope.row.proprietorshipStatus == 'PENDING'"
                         @click="changeStatus(scope.row.id, 'CONFIRMING')">
                数据确认
              </el-button>
              <el-button type="success" size="mini" v-if="scope.row.proprietorshipStatus == 'CONFIRMING'"
                         @click="changeStatus(scope.row.id, 'APPROVED')">确权通过
              </el-button>
              <el-button
                v-if="scope.row.proprietorshipStatus == 'PENDING' || scope.row.proprietorshipStatus == 'CONFIRMING'"
                size="mini" type="danger" @click="changeStatus(scope.row.id, 'REJECTED')">驳回
              </el-button>
<!--              <el-button v-if="scope.row.proprietorshipStatus == 'APPROVED'" size="mini" type=""-->
<!--                         @click="dialogVisible = true">区块信息-->
<!--              </el-button>-->
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <el-dialog title="以太坊区块高度" :visible.sync="dialogVisible" width="600px">
      <div v-for="item in hashData">
        <div>
          <span>区块：</span>
          <el-link type="primary">{{ item.block }}</el-link>
        </div>
        <div>
          <span>由 </span>
          <el-link type="primary">{{  item.miner  }}</el-link>
          <span> 开采</span>
          <span style="float: right;">矿工费</span>
        </div>
        <div>
          <span>在 </span>
          <el-link type="primary">{{ item.time }}</el-link>
          <span> 秒内完成 </span>
          <el-link type="primary">{{ item.count }}</el-link>
          <span> 笔交易</span>
          <el-tag style="float: right;" type="success" size="mini">{{ item.fee }} ETH</el-tag>
        </div>
        <hr/>
      </div>
    </el-dialog>
    <el-dialog title="确认操作" :visible.sync="confirmDialogVisible" width="30%">
      <span>是否需要确认要执行该操作?</span>
      <div style="margin-top: 10px;">
        <el-checkbox v-model="isTermsChecked" v-if="currentStatus=='APPROVED'">我已下载证明文件并阅读完毕</el-checkbox>
      </div>
      <span slot="footer" class="dialog-footer">
      <el-button @click="confirmDialogVisible = false" size="mini">取消</el-button>
      <el-button type="primary" size="mini" :disabled="!isTermsChecked && currentStatus=='APPROVED'" @click="confirmAction">确定</el-button>
      <el-button type="success" size="mini" @click="downloadFile">下载证明文件</el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>
import request from '@/utils/request'
import axios from "axios";
import {getToken} from "../../../utils/auth";
import {downloadNew} from "./js";

export default {
  name: 'auditing',
  data() {
    return {
      isDownloadFile: false,// 是否下载文件了
      isTermsChecked: false,
      currentId:'',
      currentStatus:'',
      confirmDialogVisible: false,
      dialogVisible: false,
      loading: false,
      tableData: [],
      hashData: [{
        block: 100000,
        miner: '0x9a74e0aecf1dd5162d9802c60527c82230fdf703',
        time: 20,
        count: 22,
        fee: 0.00101
      },{
        block: 100001,
        miner: '0x000000633b68f5d6d3a76593eeb815b4663bcbe0',
        time: 5,
        count: 15,
        fee: 0.00231
      },{
        block: 100002,
        miner: '0x68d30f47f19c06bccef4bc7fae2dc12fca3e0dc9',
        time: 16,
        count: 12,
        fee: 0.00098
      },{
        block: 100003,
        miner: '0x68d30f47f19c07bccef4bc7fae2dc12fca3e0dc6',
        time: 13,
        count: 30,
        fee: 0.00324
      }]
    }
  },
  mounted() {
    // 审核
    // http://localhost:8081/cloud/jcce/v1.0/kt1/userResourceApply?resourceId=106&userId=196618686130565120&applyNote=12321321312
    this.fetchDataRes()
  },
  methods: {
    fetchDataRes() {
      let _self = this
      request({
        url: '/cloud/jcce/v1.0/kt1/dataResource',
        method: 'get',
        params: {
          pageNo: 1,
          pageSize: 100,
          userId: 1
        }
      }).then((data) => {
        _self.tableData = data.data.pageData
      })
    },
    timestampToDatetime(timestamp) {
      const date = new Date(timestamp);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    confirmAction() {
      this.confirmDialogVisible = false;
      request({
        url: '/cloud/jcce/v1.0/kt1/dataResource?id=' + this.currentId + '&proprietorshipStatus=' + this.currentStatus,
        method: 'put',
      }).then((data) => {
        debugger
        if(data.data.msg!=='SUCCESS'){
          this.$message.error(data.data.msg)
          this.isLoading = false
          return
        }
        console.log(data)
        this.fetchDataRes()
      })

    },
    downloadFile() {
      // Implement your download logic here
      downloadNew(this.currentId, 'PROOF_FILE')
    },
     downloadNew(id, fileType) {
      axios.get('/cloud/jcce/v1.0/kt1/download?id=' + id + '&fileType=' + fileType, {
        headers: {
          Authorization: getToken()
        },
        responseType: 'blob'
      }).then(res => {
        // 这里的type最好参考Response Headers里面的content-type，有可能是application/vnd.ms-excel
        const blob = new Blob([res.data])
        // 获取文件名，根据自己需要的分割
        const content = res.headers['content-disposition']
        const index = content.indexOf('filename=')
        let fileName = content.substring(index + 9) // 截取文件名
        fileName = decodeURIComponent(fileName).replace(new RegExp('"', 'g'), '')
        const a = document.createElement('a')
        const url = window.URL.createObjectURL(blob)
        a.href = url
        a.download = fileName
        document.body.appendChild(a)
        a.style.display = 'none'
        a.click()
        document.body.removeChild(a)
        window.URL.revokeObjectURL(url)
      })
    },
    changeStatus(id, status) {
      this.currentId = id;
      this.currentStatus = status;
      this.confirmDialogVisible =true;
      // let _self = this
      // _self.$confirm('是否需要确认要执行该操作?', '提示', {
      //   confirmButtonText: '确定',
      //   cancelButtonText: '取消',
      //   type: 'warning'
      // }).then(() => {
      //   request({
      //     url: '/cloud/jcce/v1.0/kt1/dataResource?id=' + id + '&proprietorshipStatus=' + status,
      //     method: 'put',
      //   }).then((data) => {
      //     console.log(data)
      //     _self.fetchDataRes()
      //   })
      // })
      this.currentId = id
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
}
</script>

<style lang="scss">
.table_box {
  .el-table {
    background-color: rgba(38, 38, 38, 0);
    border-radius: 3px;
    border-color: white;
  }

  .el-table tr {
    background-color: transparent;
    color: white;
  }

  .el-table th.el-table__cell.is-leaf {
    border-bottom: 1px solid rgba(255, 255, 255, 0.8);
  }

  .el-table th {
    background-color: rgba(150, 150, 150, 0.26) !important;
    font-size: 11pt;
  }

  .el-table th .cell {
    color: #ffffff;
    font-size: 11pt;
    height: 19px
  }

  .el-table td {
    border-color: rgba(255, 255, 255, 0.2);
    font-size: 11pt;
  }

  .el-table--enable-row-hover .el-table__body tr:hover td {
    background-color: rgba(38, 38, 38, 0.5) !important;
    color: white !important;
  }
}

</style>
